<template>
	<div class="border-2 border-border-1 rounded pt-2 px-4 pb-3 cursor-pointer">
		<div class="flex items-center">
			<base-icon v-if="isActive" name="correct2" class="text-primary text-[20px]"></base-icon>
			<div v-else class="size-5 rounded-full border-2 border-border-2"></div>
			<base-text :text="title" class="ml-2"></base-text>
		</div>
		<div class="mt-1 text-sm text-t-4">{{ desc }}</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon, BaseText } from '@/components/base'
defineProps({
	title: {
		type: String,
		default: ''
	},
	desc: {
		type: String,
		default: ''
	},
	isActive: {
		type: Boolean,
		default: false
	}
})
</script>
